<template>
	<view class="complaint-add">
		<uni-forms :modelValue="formData" class="form-s" label-position="top">
			<uni-forms-item label="您的姓名:" required>
				<!-- #ifdef MP-WEIXIN -->
				<view class="hisList yellow">
					<navigator url="/pages/personal/feedback/index">历史反馈</navigator>
				</view>
				<!-- #endif -->
				<input type="text" v-model="formData.userName" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="您的联系方式:" required>
				<input type="number" maxlength="11" v-model="formData.mobile" placeholder="请输入联系方式" />
			</uni-forms-item>
			<uni-forms-item class="uni-sug noBorder" label="添加反馈内容:" required>
				<view class="uni-sug-t">
					<textarea class="uni-sug-textarea" maxlength="300" v-model="formData.feedback" placeholder="请输入反馈内容"></textarea>
					<view class="num">{{formData.feedback&&formData.feedback.length || 0}}/300</view>
				</view>
			</uni-forms-item>
			<uni-forms-item class="uni-sug noBorder" label="添加图片:">
				<view>
					<uploadImgs v-model="formData.feedbackImages" :width="100" :height="100" :maxCount="10"></uploadImgs>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view class="submit-btn" @click="submit">提交</view>
	</view>
</template>
<script setup lang="ts">
import { reactive } from "vue"
import { onNavigationBarButtonTap } from "@dcloudio/uni-app"
import { feedbackCreate } from '@/common/API/member'
import { checkPhone } from '@/utils/Foundation.js'
import uploadImgs from '@/components/upload/uploadImgs.vue'

const formData = reactive({
	userName:'',
	mobile:'',
	feedback:'',
	feedbackImages:[]
})


//弹窗确认
const submit = async () => {
	console.log(formData.feedbackImages)
	if(!formData.userName){
		uni.showToast({
			title:'请输入您的姓名',
			icon:'none'
		})
	}else if(!formData.mobile){
		uni.showToast({
			title:'请输入您的联系方式',
			icon:'none'
		})
	}else if (!checkPhone(formData.mobile)) {
		uni.showToast({
			title: '请输入正确的联系方式',
			icon: 'none',
		});
		return false;
	}else if(!formData.feedback){
		uni.showToast({
			title:'请输入反馈内容',
			icon:'none'
		})
	}else{
		uni.showLoading({
			mask: true
		})
		await feedbackCreate(formData)
		uni.showToast({
			title: '提交成功'
		})
		setTimeout(()=>{
			uni.navigateBack()
		},2000)
	}
}

onNavigationBarButtonTap((val)=>{
	if(val.float == 'right'){
		uni.navigateTo({
			url:'/pages/personal/feedback/index'
		})
	}
})
</script>
<style>
	page{
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.complaint-add {
		padding-bottom: 20rpx;
		::v-deep.uni-forms-item{
			background: #fff;
			padding: 10rpx 32rpx 4rpx;
			margin: 0;
			position: relative;
			&.noBorder{
				.uni-forms-item__content{
					border: none;
					padding: 0;
				}
			}
			/* #ifdef MP-WEIXIN */
			&:nth-child(3),&:nth-child(4){
				.uni-forms-item__content{
					border: none;
					padding: 0;
				}
			}
			/* #endif */
			.hisList{
				text-align: right;
				position: absolute;
				top: -60rpx;
				right: 0;
				z-index: 99;
				line-height: 60rpx;
				font-size: 28rpx;
			}
			uni-input{
				font-size: 28rpx;
			}
			.uni-forms-item__label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
				line-height: 60rpx;
				width: 100% !important;
				padding: 0;
			}
			.uni-forms-item__content{
				border: 2rpx solid #f5f5f5;
				padding: 12rpx 24rpx;
				border-radius: 8rpx;
			}
			.check-icon{
				width: 16rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
			.check-box{
				flex: 1;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: right;
			}
		}
		::v-deep.uni-sug{
			::v-deep .uni-forms-item__label{
				position: absolute;
				top:20rpx
			}
			.uni-sug-label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
				padding: 0 0 20rpx 20rpx;
				&>span{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
		::v-deep.uni-sug-t{
			width: 686rpx;
			margin: 0 auto;
			font-size: 28rpx;
			position: relative;
			.num{
				position: absolute;
				right: 20rpx;
				bottom: 32rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
			.uni-sug-textarea{
				width: 638rpx;
				height: 228rpx;
				font-size: 28rpx;
				padding: 24rpx 24rpx 40rpx 24rpx;
				background: rgba(245, 245, 245, 1);
			}
		}
		.submit-btn{
			width: 320rpx;
			margin: 94rpx auto 20rpx;
			border-radius: 100rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
		}
	}
</style>
